<template>
	<view class="big">
		<view class="nav-bottom-bg">
			<view class="nav-mask-bg">
				<view class="nav-top-bg">
					<u-navbar :custom-back="goBack" back-icon-color="#ffffff" :border-bottom="false"
						:background="bgColor">
					</u-navbar>
				</view>
				<view class="container position-relative">
					<div class="padding-200">
						<view title="title" class="text-1EF7FE family-cn font-weight-600 fz-48">欢迎登录POSTRINGS+</view>
					</div>
					<view class="item">
						<u-input type="number" :custom-style="customStyle" class="input-box" :height="98" maxlength="11"
							shape="circle" clearable :border="false" v-model="param.mobile" placeholder="账号"
							placeholder-style="color:#999BA8">
						</u-input>
					</view>
					<view class="item" v-show="isPassLogin">
						<u-input :type="type" :custom-style="customStyle" class="input-box pwd" :height="98"
							:password-icon="false" shape="circle" :border="false" clearable v-model="param.password"
							placeholder="密码" placeholder-style="color:#999BA8">
						</u-input>
						<image src="../../static/login/login_eye.png" class="eye-img ml-1" mode="" @tap="isEye= false"
							v-show="isEye">
						</image>
						<image src="../../static/login/login_eyeClose.png" class="eye-img ml-1" mode=""
							@tap="isEye= true" v-show="!isEye"></image>
					</view>
					<view class="item" v-show="!isPassLogin">
						<u-input type="number" :custom-style="customStyle" maxlength="6" :height="98"
							class="input-box code" shape="circle" clearable :border="false"
							v-model="param.verification_code" placeholder="验证码" placeholder-style="color:#999BA8">
						</u-input>
						<span class="get-code text-F5F6F9" @tap="getCode">{{tips}}</span>
					</view>
					<u-button :loading="loading" shape="circle" class="yellow-bg text-ffffff fz-36 mb-1" hover-class="none"
						@tap="login">登录</u-button>
					<!-- 	<view class="text-left text-999BA8 fz-26" style="height: 40upx;">{{!isPassLogin?'未注册手机号将自动注册':''}}</view>
						<view class="login-type d-flex justify-content-center align-items-center text-333447 fz-30">
							<view class="text-center text-CCCDD5" v-if="isPassLogin" @tap="loginType(false)">短信登录</view>
							<view class="text-center text-CCCDD5" v-else @tap="loginType(true)">密码登录</view>
						</view> -->
					<view class="login-style d-flex justify-content-between align-items-center text-999BA8 fz-30">
						<view @tap="toPassword">忘记密码？</view>
						<view @tap="toReg">新用户注册</view>
					</view>
					<view class="d-flex align-items-start login-tips">
						<u-checkbox-group @change="checkChange" width="40upx">
							<u-checkbox activeColor="#292940" size="30" v-model="isCheck" shape="circle"></u-checkbox>
						</u-checkbox-group>
						<span class=" fz-24 text-left text-999BA8">登录代表我已阅读并同意
							<text class="text-00D7FF fz-24">
								<text @click="toAgreement">《用户服务协议》</text>
								<text @click="toPrivacy">《用户隐私协议》</text>
							</text>
						</span>
					</view>
				</view>
				<u-toast ref="uToast"></u-toast>
				<u-verification-code seconds="60" @end="end" changeText="Xs获取" @start="start" ref="uCode"
					@change="codeChange">
				</u-verification-code>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPassLogin: true, //是否账号密码登录
				loading: false,
				isCheck: true,
				noBack: false,
				isEye: false,
				customStyle: {
					color: 'rgba(255,255,255,0.85)',
					fontSize: '30upx'
				},
				param: {
					mobile: '',
					password: '',
					verification_code: ''
				},
				tips: '获取验证码',
				bgColor: {
					background: 'rgba(255,255,255,0)'
				}
			}
		},
		computed: {
			type() {
				return !this.isEye ? 'password' : 'text'
			},
		},
		methods: {
			goBack() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					if (canNavBack[canNavBack.length - 1].route == 'pages/login/login') {
						return uni.switchTab({
							url: '/pages/tabBars/home'
						})
					}
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/tabBars/home'
					})
				}
			},
			//切换登录方式
			loginType(type) {
				this.isPassLogin = type
				this.param.password = ''
				this.param.verification_code = ''
			},
			codeChange(text) {
				this.tips = text;
			},
			checkChange(e) {
				this.isCheck = e
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					//进行表单检查
					let checkRes = uni.$u.test.mobile(this.param.mobile)
					if (checkRes) {
						this.$store.dispatch('auth/smsSend', {
							mobile: this.param.mobile
						}).then(res => {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}).catch(error => {
							uni.$u.toast(error.data.message)
						})
					} else {
						uni.$u.toast('请输入正确的手机号')
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			login() {
				if (!this.isCheck) {
					return uni.$u.toast('请勾选同意协议')
				}
				if (!uni.$u.test.mobile(this.param.mobile)) {
					return uni.$u.toast('请输入正确的手机号')
				}
				if (this.isPassLogin && this.param.password === '') {
					return uni.$u.toast('请输入密码')
				}
				if (!this.isPassLogin && this.param.verification_code === '') {
					return uni.$u.toast('请输入验证码')
				}
				let param = {}
				if (this.isPassLogin) {
					param = {
						mobile: this.param.mobile,
						password: this.param.password
					}
				} else {
					param = {
						mobile: this.param.mobile,
						verification_code: this.param.verification_code
					}
				}
				this.loading = true
				
				
						uni.reLaunch({
							url: '/pages/setting/viewer'
						})
						
				
				// this.$store.dispatch('auth/login', param).then(res => {
				// 	this.$store.dispatch('auth/user').then(res => {
				// 		//获取资产列表
				// 		this.tui.getWallet()
				// 		this.loading = false
						
						
				// 		// 跳转直播页面
				// 		uni.reLaunch({
				// 			url: '/pages/setting/zhibo'
				// 		})
						
						
				// 		console.log("SSSS")
				// 		//如果账号没有设置昵称和头像则跳转完善信息页面
				// 		if (!res.data.has_password) {
				// 			uni.reLaunch({
				// 				url: '/pages/setting/setPassword'
				// 			})
				// 			//如果都设置了则跳回上一页
				// 		} else if (!res.data.avatar) {
				// 			uni.reLaunch({
				// 				url: '/pages/setting/perfectInfo'
				// 			})
				// 			//如果账号没有设置密码则跳转设置密码页面
				// 		} else {
				// 			this.goBack()
				// 		}
				// 	}).catch(error => {
				// 		this.loading = false
				// 	})
				// }).catch(error => {
				// 	this.loading = false
				// })
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			toHome() {
				uni.switchTab({
					url: '/pages/TabBars/home'
				})
			},
			toPassword() {
				uni.navigateTo({
					url: '/pages/login/forgotPassword'
				})
			},
			toReg() {
				uni.navigateTo({
					url: '/pages/login/registered'
				})
			},
			//协议
			toAgreement() {
				uni.navigateTo({
					url: '/pages/secondary/home/announcement-detail?id=1000'
				})
			},
			//隐私
			toPrivacy() {
				uni.navigateTo({
					url: '/pages/secondary/home/announcement-detail?id=1001'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.fz-60 {
		font-size: 60upx !important;
	}

	.big {
		width: 100%;
		height: 100vh;
		background: url('/static/login/j-bg.png') no-repeat center bottom !important;
		background-size: cover !important;
		background-position:bottom;
	}

	.nav-bottom-bg {
		width: 100%;
		height: 100vh;
		// background: url('https://postrings.oss-accelerate.aliyuncs.com/avatar/20230327/AhnbejjVi6JS5PM9labFssmE4uX9jWSvZXQBBV18.gif') no-repeat center bottom !important;
		background: url('https://postrings.oss-accelerate.aliyuncs.com/works/3/2023/04/13/10/1681351309363.gif') no-repeat center bottom !important;
		background-size: cover !important;
	}

	.nav-mask-bg {
		width: 100%;
		height: 100vh;
		background: rgba(13, 24, 68, 0.5);
	}

	.nav-top-bg {
		width: 100%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.padding-200 {
		padding-top: 146upx;
		padding-bottom: 50upx;
	}

	.container {
		width: 690upx;
		margin: 0 auto;

		.item {
			width: 100%;
			margin-top: 40upx;
			position: relative;

			.input-box {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				text-align: left;
				background: rgba(204, 205, 213, 0.2);
				border-radius: 49upx;
				padding: 0upx 30upx !important;
			}

			.get-code {
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				color: #292940;
			}

			.eye-img {
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				width: 36upx;
				height: 36upx;
			}

			.pwd {
				padding: 0 80upx 0 30upx !important;
			}

			.code {
				padding: 0 200upx 0 30upx !important;
			}
		}

		button {
			width: 100%;
			height: 98upx;
			border-radius: 50upx;
			line-height: 98upx;
			font-size: 32upx;
			color: #FFFFFF;
			margin-top: 60upx;
			margin-bottom: 60upx;
		}

		uni-button:after {
			border: none !important;
		}


	}

	.line {
		width: 1upx;
		background: rgba(224, 229, 233, .8);
		height: 29upx;
		margin: 0 36upx;
	}

	.login-tips {
		position: fixed;
		bottom: 38upx;
	}

	.login-type {
		margin-top: 20upx;

		span:nth-of-type(1) {
			width: 240upx;
			text-align: right;
		}

		span:nth-of-type(2) {

			width: 240upx;
			text-align: left;
		}
	}

	.login-style {
		margin-top: 58upx;
	}

	.text-D8D9E1 {
		color: #D8D9E1;
	}

	.text-CCCDD5 {
		color: #CCCDD5;
	}

	.text-999BA8 {
		color: #999BA8;
	}
</style>
